<template>
  <div class="container">
    <el-row class="shop-container">
      <el-col :span="4" v-for="(item,index) in list" :key="index" class="shop-list">
        <div class="shop-item">
          <img :src="item.shopImage" v-lazy="item.shopImage" :alt="item.altTitle" class="shop-img">
          <p>{{item.totalNumber}} <span>{{item.shopPrice}}￥</span></p>
          <el-button type="mini" @click="addShopCar(item)">加入购物车</el-button>
        </div>

      </el-col>
    </el-row>
  <el-button @click="goShopCar">购物车</el-button>
  </div>
</template>
<script>
  import Api from "../api/index";
  import {mapActions ,mapGetters} from 'vuex'

  export default {
    data() {
      return {
        list: [
          {
            shopName: "iphone7",
            totalNumber: 1200,
            shopPrice: 4699,
            shopImage: 'https://img10.360buyimg.com/n7/jfs/t8107/37/1359438185/72159/a6129e26/59b857f8N977f476c.jpg',
            altTitle: "限时特惠，下单立减1000元，成交价5688元！勾选[保障服务][原厂保2年]，原厂延保更安心。更多活动"
          },
          {
            shopName: "iphone7",
            totalNumber: 1200,
            shopPrice: 4699,
            shopImage: 'https://11img10.360buyimg.com/n7/jfs/t8107/37/1359438185/72159/a6129e26/59b857f8N977f476c.jpg',
            altTitle: "限时特惠，下单立减1000元，成交价5688元！勾选[保障服务][原厂保2年]，原厂延保更安心。更多活动"
          },
          {
            shopName: "iphone7",
            totalNumber: 1200,
            shopPrice: 4699,
            shopImage: 'https://img10.360buyimg.com/n7/jfs/t8107/37/1359438185/72159/a6129e26/59b857f8N977f476c.jpg',
            altTitle: "限时特惠，下单立减1000元，成交价5688元！勾选[保障服务][原厂保2年]，原厂延保更安心。更多活动"
          },
          {
            shopName: "iphone7",
            totalNumber: 1200,
            shopPrice: 4699,
            shopImage: 'https://img10.360buyimg.com/n7/jfs/t8107/37/1359438185/72159/a6129e26/59b857f8N977f476c.jpg',
            altTitle: "限时特惠，下单立减1000元，成交价5688元！勾选[保障服务][原厂保2年]，原厂延保更安心。更多活动"
          },
          {
            shopName: "iphone7",
            totalNumber: 1200,
            shopPrice: 4699,
            shopImage: 'https://img10.360buyimg.com/n7/jfs/t8107/37/1359438185/72159/a6129e26/59b857f8N977f476c.jpg',
            altTitle: "限时特惠，下单立减1000元，成交价5688元！勾选[保障服务][原厂保2年]，原厂延保更安心。更多活动"
          },
          {
            shopName: "iphone7",
            totalNumber: 1200,
            shopPrice: 4699,
            shopImage: 'https://img10.360buyimg.com/n7/jfs/t8107/37/1359438185/72159/a6129e26/59b857f8N977f476c.jpg',
            altTitle: "限时特惠，下单立减1000元，成交价5688元！勾选[保障服务][原厂保2年]，原厂延保更安心。更多活动"
          },
          {
            shopName: "iphone7",
            totalNumber: 1200,
            shopPrice: 4699,
            shopImage: 'https://img10.360buyimg.com/n7/jfs/t8107/37/1359438185/72159/a6129e26/59b857f8N977f476c.jpg',
            altTitle: "限时特惠，下单立减1000元，成交价5688元！勾选[保障服务][原厂保2年]，原厂延保更安心。更多活动"
          },
          {
            shopName: "iphone7",
            totalNumber: 1200,
            shopPrice: 4699,
            shopImage: 'https://img10.360buyimg.com/n7/jfs/t8107/37/1359438185/72159/a6129e26/59b857f8N977f476c.jpg',
            altTitle: "限时特惠，下单立减1000元，成交价5688元！勾选[保障服务][原厂保2年]，原厂延保更安心。更多活动"
          },
        ]
      };
    },
    computed:{
      ...mapGetters([
        'shopCar'
      ])
    },
    methods: {
    ...mapActions({
      addShopCar:'setShopCar'
    }),
      goShopCar(){
        this.$router.push({path:"/shopCar"})
      }
    },
    mounted() {
      console.log(this.shopCar)
    },
    head: {
      title: "首页"
    }
  };
</script>
<style lang="scss" scoped>
  .text-center {
    text-align: center;
  }

  .container {
    width: 1366px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    .shop-container {
      margin: 20px 0;
      .shopList {
        position: relative;
        overflow: hidden;
        padding: 0 10px;

        .shop-item {
          padding: 20px;
          margin-bottom: 20px;
          &:hover {
            box-shadow: 0 1px 2px #ddd;
            cursor: pointer;
          }
          .shop-img {
            width: 100%;
          }
        }

      }
    }

  }
</style>

